<template>
  <el-dialog title="业主信息" :model-value="visible" width="720px" :fullscreen="mobile" @close="handleCancel">
    <div class="primary-section pv-12">
      <span class="fc-secondary mr20">房源地址</span>
      <span>朝花夕拾A1101</span>
    </div>
    <el-form :model="baseInfoForm" ref="baseInfoFormRef" :rules="baseInfoRules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="renterName">
            <el-input v-model="baseInfoForm.renterName" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="contacts">
            <el-input v-model="baseInfoForm.contacts" placeholder="请输入联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号" prop="idNumber">
            <el-input v-model="baseInfoForm.idNumber" placeholder="请输入证件号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-icon class="mt10 ml10"><Wallet /></el-icon>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合约周期" required>
            <el-row align="middle">
              <el-col :span="6">
                <el-form-item label-width="0" prop="startDate">
                  <el-date-picker
                    v-model="baseInfoForm.startDate"
                    :editable="false"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择开始日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <div style="text-align: center;">-</div>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="0" prop="endDate">
                  <el-date-picker
                    v-model="baseInfoForm.endDate"
                    type="date"
                    :editable="false"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择结束日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <div class="ml10">
                  <el-button>1年</el-button>
                  <el-button>2年</el-button>
                  <el-button>3年</el-button>
                  <el-button>5年</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月租金">
            <el-input v-model="baseInfoForm.rent" placeholder="请输入租金"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="押金">
            <el-input v-model="baseInfoForm.deposit" placeholder="请输入押金"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款方式" prop="rentCollectType">
            <el-select v-model="baseInfoForm.rentCollectType">
              <el-option label="每1月" value="1"></el-option>
              <el-option label="每2月" value="2"></el-option>
              <el-option label="每3月" value="3"></el-option>
              <el-option label="每4月" value="4"></el-option>
              <el-option label="每6月" value="5"></el-option>
              <el-option label="每1年" value="6"></el-option>
              <el-option label="一次性" value="7"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款银行">
            <el-input v-model="baseInfoForm.bankName" placeholder="请输入收款银行"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款账号">
            <el-input v-model="baseInfoForm.bankNumber" placeholder="请输入收款账号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="LandlordDl">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'add'
  },
  form: {
    type: Object,
    default: () => {}
  }
})
const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  baseInfoForm: {
    renterName: null,
    contacts: null,
    idNumber: null,
    startDate: '',
    endDate: '',
    rent: null,
    deposit: null,
    rentCollectType: 1,
    bankName: null,
    bankNumber: null
  }, 
  baseInfoRules: {
    renterName: [{ required: true, message: "请输入名字", trigger: "blur" }],
    contacts: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    startDate: [{ required: true, type: 'date', message: "请选择开始日期", trigger: "blur" }],
    endDate: [{ required: true, type: 'date', message: "请选择结束日期", trigger: ["blur"] }],
    rent: [
      { pattern: /^(0|([1-9][0-9]*))?(.\d{1,2})?$/, message: "请输入正确的租金", trigger: ["blur", "change"] }
    ],
    deposit: [
      { pattern: /^(0|([1-9][0-9]*))?(.\d{1,2})?$/, message: "请输入正确的押金", trigger: ["blur", "change"] }
    ],
  },
})
const { baseInfoForm, baseInfoRules } = toRefs(data)

watch(() => props.visible, value => {
  if (value) {
    proxy.resetForm('baseInfoFormRef')
    if (props.type === 'edit') {
      baseInfoForm.value = { ...props.form }
    }
  }
})

function handleCancel() {
  emit('cancel')
}

function handleOk() {
  proxy.$refs['baseInfoFormRef'].validate(valid => {
    if (valid) {
      emit('ok', baseInfoForm.value)
    }
  })
}
</script>
